<template>
  <div class="Web_Box">
    <div class="appdown f-cb">
      <div class="applogo"><img src="../../assets/images/message_logo.png"></div>
      <div class="iconfont icon-shoppingcart"></div>
      <div class="SearchBox" style="margin: 7px 50px 7px 80px;overflow: hidden;display: block;">
        <div class="SearchBor xd hidden"> <i class="iconfont icon-search lh70"></i>
          <input type="text" class="SearchInp pl80" placeholder="搜索您需要的商品">
        </div>
      </div>
    </div>
    <div class="pp_wrap">
      <ul class="category">
        <li :class="{'cur': curCategoryId == item.gc_id}" v-for="item in curGood.data"><a @click="goodsClass(item.gc_id, item.gc_name)">{{item.gc_name}}</a></li>
      </ul>

      <div class="dp_list2">
        <div class="cate_list2">
          <!--<div>-->
            <!--<div class="title"><span>{{item.gc_name}}</span></div>-->
            <!--<ul v-for="list in item.list">-->
              <!--<li @click="gotoGoodsDetail(list)">-->
                <!--<a>-->
                  <!--<em>-->
                    <!--<img :src="$config.website + $config.goodsImgSrc + list.goods_image"></em>-->
                  <!--<span>{{list.goods_name}}</span>-->
                <!--</a>-->
              <!--</li>-->
            <!--</ul>-->
            <ul>
              <li v-for="item in goodsClassData" v-show="item.list != ''">
                <a @click="gotoListGoods(item.gc_id)">
                  <span style="color: #f2782c">{{item.gc_name}}<i class="iconfont icon-more"></i></span>
                  <em>
                    <img :src="hostName + $config.goodsImgSrc + item.list[0].goods_image"></em>
                    <b></b>
                  <span>{{item.list[0].goods_name}}</span>
                </a>
              </li>
            </ul>
          <!--</div>-->
        </div>
      </div>
    </div>



    <empty-data :show="goodsClassData == ''" style="margin-top: -8rem;margin-left: 1.5rem"></empty-data>

    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default {
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.from = from.name
        vm.toFullPath = to.fullPath
      })
    },
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: 'memberInfo'})
    ],
    data() {
      return {
        curCategoryId: '',
        classifyId: this.$route.params.classifyId || '',
        classifyText: this.$route.params.class_name || '',
        classifyData: [],
        curGood: {
          page: 1, pageSize: 10, requested: false, loading: false, allLoaded: false, data: []
        },
        goodsClassData: [],
        hostName: 'http://' + window.location.hostname,
        gc_name: ''
      }
    },
    components: {},
    created() {
      console.log('classifyid= ' + this.classifyId)
      // this.init()
      this.getGoodsByClassify('200', 1, 100, '71')
      this.goodsClass('341', '生活洗护')
    },
    methods: {
      gotoListGoods(gc_id) {
        this.$router.push({name: 'goods-listGoods2', query: {classifyId: this.curCategoryId, class_name: this.gc_name, goodstype: '3', gc_id: gc_id}})
      },
      goodsClass(gc_id, gc_name) {
        this.gc_name = gc_name
        this.curCategoryId = gc_id
        this.$request.goods_jp_class(gc_id).then(data => {
          this.goodsClassData = data.goods_list
        }).finally(() => {
        })
        console.log(document.getElementById(gc_id))
      },
      init() {
        this.getGoodsByClassify(this.classifyId, this.curGood.page, this.curGood.pageSize)
        // this.getClassifyGoods()
      },
      initCurGoodsList() {
        this.curGood.requested = false
        this.curGood.loading = false
        this.curGood.allLoaded = false
        this.curGood.page = 1
        this.curGood.pageSize = 10
        this.curGood.data = []
      },
      changeCassify(data) {
        console.log(data)
        if (this.classifyId != data.id) {
          this.classifyText = data.class_name
          this.classifyId = data.id
          this.initCurGoodsList()
          this.getGoodsByClassify(data.id, this.curGood.page, this.curGood.pageSize)
        }
      },
      getGoodsByClassify(id, page, pageSize) {
        this.curGood.loading = true
        this.$request.getGoodsByClassify(id, page, pageSize).then(data => {
          this.curGood.data = data.goods_class
          console.log(data.goods_class)
        }).finally(() => {
        })
      },
      gotoGoodsDetail(goods) {
        this.$router.push({name: 'goods-detail', params: {id: goods.goods_commonid}})
      }
    }
  }
</script>

<style>

</style>
